﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html class="full">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>编辑栏目</title>
    @await Html.PartialAsync("~/Views/Shared/_Import.cshtml")

    <style>
        .full {
            height: 100%;
            overflow: auto;
        }
    </style>
</head>
<body class="full">


    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="form" name="form" lay-filter="form">
                <input type="hidden" id="channelId" name="channelId" value="@ViewBag.channelId" />
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="uploader-btn">上传图片</button>
                            <div class="layui-upload-list" id="upload-list">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">栏目名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="channelName" maxlength="25" id="channelName" class="layui-input" lay-verify="required" style="width: 250px" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="number" name="sort" id="sort" class="layui-input" lay-verify="required" style="width: 250px" value="1" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">外链</label>
                    <div class="layui-input-block">
                        <input type="text" name="url" maxlength="200" id="url" class="layui-input" />
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="radio" name="channelType" value="1" title="产品列表" lay-filter="channelType">
                        <input type="radio" name="channelType" value="2" title="文章列表" lay-filter="channelType">
                        <input type="radio" name="channelType" value="3" title="下载中心" lay-filter="channelType">
                        <input type="radio" name="channelType" value="4" title="单独页面" lay-filter="channelType">
                        <input type="radio" name="channelType" value="5" title="公司简介" lay-filter="channelType">
                        <input type="radio" name="channelType" value="6" title="联系我们" lay-filter="channelType">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">上级分类</label>
                    <div class="layui-input-block">
                        <input type="text" id="fatherChannelId" lay-filter="fatherChannelId" class="layui-input" placeholder="请选择上级分类">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">推荐</label>
                    <div class="layui-input-block">
                        <select name="isHot"><option value="2" selected="selected">否</option><option value="1">是</option></select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">详情</label>
                    <div class="layui-input-block">
                        <textarea name="fullDetail" placeholder="请输入" id="fullDetail" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="~/plugins/kindeditor/kindeditor-all.js"></script>
    <script src="~/plugins/kindeditor/lang/zh-CN.js"></script>
    <script>
        layui.use(['table', "ajax", "msgbox", 'form', 'upload', 'common', 'layedit', 'treeSelect'], function () {
            var form = layui.form;

            var $ = layui.$;
            var ajax = layui.ajax;
            var upload = layui.upload;
            var common = layui.common;
            var msgBox = layui.msgbox;
            var layEdit = layui.layedit;
            var treeSelect = layui.treeSelect;
            var summaryEdit = null;
            var channelId = $("#channelId").val();
            var _fatherChannelId;

            summaryEdit = KindEditor.create('#fullDetail',
                {
                    uploadJson: '/api/image/upload4layedit',
                    allowFileManager: false,
                    resizeType : 1,
                    allowPreviewEmoticons : false,
                    allowFileUpload : false,
                    items : ['undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
                        'anchor', 'link', 'unlink'
                    ]
                });
            summaryEdit.sync();

            initUploadTool();
            loadChannelList().then(function () {
                loadData(channelId);
            });

            function initUploadTool() {
                var $imageUploader = $("#uploader-btn");
                var $uploadList = $("#upload-list");

                upload.render({
                    elem: '#uploader-btn',
                    url: '/api/image/upload',
                    accept: "images",
                    before: function () {
                        msgBox.showLoading();
                    },
                    size: 1024 * 2,
                    done: function (res) {
                        msgBox.closeLoading();
                        loadImage(res);
                    }
                });

                $uploadList.on("click", ".btn-delete", function (evt) {
                    layer.confirm('真的删除么', function (index) {
                        var id = $(evt.currentTarget).data("id");
                        msgBox.showLoading();
                        ajax.delete({}, "/api/image/delete/" + id).success(function (response) {
                            msgBox.closeLoading();
                            $(evt.currentTarget).parents(".layui-upload-wrap").remove();
                            $imageUploader.show();
                        });
                        layer.close(index);
                    });
                });
            }


            function getSummaryEdit() {
                return summaryEdit.html();
            }

            form.verify({});
            form.on('submit(*)', function (data) {
                var imageId = $(".layui-upload-wrap").data("id");

                var formData = {
                    channelName: data.field.channelName,
                    fullDetail: getSummaryEdit(),
                    channelId: data.field.channelId,
                    fatherChannelId: _fatherChannelId,
                    isHot: data.field.isHot,
                    imageId: imageId,
                    sort: data.field.sort,
                    url: data.field.url,
                    channelType: data.field.channelType
                };

                msgBox.showLoading();
                var url = "/api/content/channel/addChannel";
                var method = "post";
                if (channelId) {
                    formData.channelId = channelId;
                    url = "/api/content/channel/updateChannel?channelId=" + channelId;
                    method = "put";
                }
                ajax[method](formData, url).success(function (response) {
                    msgBox.closeLoading();
                    if (response.isSuccessed) {
                        var pi = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(pi);
                        parent.location.reload();
                    } else {
                        common.msgError(response.errorMessage.Message);
                    }
                });
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            function loadChannelList() {
                return $.getJSON("/api/content/channel/query").done(function (response) {

                    var tree = toTree(response.result, "");
                    treeSelect.render({
                        // 选择器
                        elem: '#fatherChannelId',
                        // 数据
                        data: tree,
                        // 异步加载方式：get/post，默认get
                        type: 'get',
                        // 占位符
                        placeholder: '请选择所属栏目',
                        // 是否开启搜索功能：true/false，默认false
                        search: true,
                        // 点击回调
                        click: function (d) {
                            _fatherChannelId = d.current.id;
                        }
                    });
                });
            }
            function loadData(_channelId) {
                if (_channelId) {
                    $.getJSON("/api/content/channel/" + _channelId).done(function (response) {
                        form.val('form', response.result);
                        $('[name=channelType][value=' + response.result.channelType + ']').prop("checked", true);
                        if (response.result.imageId)
                            loadImage(response.result);
                        _fatherChannelId = response.result.fatherChannelId;
                        if (response.result.fatherChannelId) {
                            treeSelect.checkNode('fatherChannelId', response.result.fatherChannelId);
                        }
                        summaryEdit.html(response.result.fullDetail);
                       
                        form.render();
                    });
                }
            }

            function loadImage(res) {
                var $imageUploader = $("#uploader-btn");
                var $uploadList = $("#upload-list");

                $uploadList.html('<div class="layui-upload-wrap" data-id="' + res.imageId + '">'
                    + '  <img class= "layui-upload-img" width = "80%" src = "/api/image/download/' + res.imageId + '" />'
                    + '  <p>'
                    + '     <button type="button" class="layui-btn layui-btn-primary  btn-delete" data-lay data-id="' + res.imageId + '">删除</button>'
                    + '  </p>'
                    + '</div >');
                $imageUploader.hide();
            }

            function toTree(data, fatherChannelId) {
                var tree = [];
                var temp;
                for (var i = 0; i < data.length; i++) {
                    if (!fatherChannelId || data[i].fatherChannelId === fatherChannelId) {
                        var obj = data[i];
                        obj.id = data[i].channelId;
                        obj.name = data[i].channelName;
                        temp = toTree(data, data[i].channelId);
                        if (temp.length > 0) {
                            obj.open = true;
                            obj.children = temp;
                        }
                        tree.push(obj);
                    }
                }
                return tree;
            }
        });
    </script>
</body>
</html>
